// pages/category/index.js
// 引入用来发送请求的方法 一定要把路径补全
import {request} from "../../request/index.js"
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 左侧菜单数据
        leftMenuList:[],
        // 右侧菜单数据
        rightMenuList:[],
        // 被点击的左侧菜单
        currentIndex:0,
        // 右侧内容滚动条距离顶部的距离
        scrollTop:0

    },
    // 分类接口返回数据
    Cates:[],

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        
        /*
            0.传统web中本地存储方式为和小程序的本地存储方式不同
                1.写代码方式不一样了
                    传统web中
                    web: localStroage.setItem("key", "value")   localStorage.getItem("key")
                    小程序中
                    wx.setStorageSync("key", "value")      wx.getStorageSync("key")
                    1.先判断一下本地存储中有没有旧数据
                2.存到时候有没有做类型转换
                    web；不管存入的是什么类型的数据，最终都会先调用toString()方法，将数据变成字符串数据 存入
                    小程序中：不存在类型转换操作
            
            {time:Date.now(), data:[...]}
            2.没有旧数据 直接发送新请求
            3.有旧数据 同时 旧数据没有过期 就使用 本地存储的旧数据即可
        */

        // 1, 获取本地存储中的数据（小程序中也是存在本地存储技术的）
        const Cates = wx.getStorageSync("cates");
        // 2. 判断 如果不存在 则发送请求数据
        if(!Cates){
            // 不存在 发送请求数据
            this.getCates();
        }else{
            //有旧的数据 定义过期时间 10s 改成5min
            if(Date.now()-Cates.time>1000*10){
                //过期 重新发送请求
                this.getCates();
            }else{
                // 可以使用旧数据
                // 将旧数据从本地缓存中读出来 塞进接口列表中
                this.Cates = Cates.data;
                // 构造左侧菜单数据
                let leftMenuList=this.Cates.map(v=>v.cat_name)
                // 构造右侧商品数据
                let rightMenuList=this.Cates[0].children;
                this.setData({
                    leftMenuList,
                    rightMenuList
                })

            }
        }

        // 调用获取分类数据方法
    }, 

    // 获取分类数据
    getCates(){
        request({
            url:"https://api-hmugo-web.itheima.net/api/public/v1/categories"
        })
        .then(res=>{
            this.Cates = res.data.message;
            // 把接口数据 存储到本地存储中
            wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});

            
            // 构造左侧菜单数据
            let leftMenuList=this.Cates.map(v=>v.cat_name)
            // 构造右侧商品数据
            let rightMenuList=this.Cates[0].children;
            this.setData({
                leftMenuList,
                rightMenuList
            })
        })
    },
    // 左侧菜单点击事件
    handleItemTap(e){
        // 1.获取被点击标题身上的索引
        // 2.给data中的currentIndex赋值
        // 3.根据不同的索引来渲染不同内容
        const {index} = e.currentTarget.dataset;
        let rightMenuList=this.Cates[index].children;
        this.setData({
            // 给索引赋值
            currentIndex:index,
            // 填充右侧区域内容
            rightMenuList,
            // 重新设置右侧内容scroll-view标签距离顶部的距离
            scrollTop:0

        })
    }
    
})